<template>
    <div class="container">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="领取记录" name="first">
                <el-form :model="form" ref="form" label-width="100px" :inline="true" size="mini">
                    <el-form-item label="手机号：" prop="mobile">
                        <el-input v-model="form.mobile"></el-input>
                    </el-form-item>

                    <el-form-item label="领取时间：" prop="receivedTime">
                        <el-date-picker type="date" v-model="form.receivedTime" value-format="yyyy-MM-dd" placeholder="选择日期时间">
                        </el-date-picker>

                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button type="primary" @click="clearForm('form')">清空搜索条件</el-button>
                    </el-form-item>
                  <el-button v-if="rightsButtons['export']" style="float: right" type="success" size="mini" @click="download('received')">导出Execl</el-button>
                </el-form>
                <el-table :data="receiveList" border stripe>
                    <el-table-column label="会员手机号" prop="mobile">
                    </el-table-column>
                    <el-table-column label="金额" prop="price">
                    </el-table-column>
                    <el-table-column label="获取时间" prop="createdAt">
                        <template slot-scope="scope">
                            <div>
                                {{formatDate(scope.row.createdAt,'YYYY-MM-DD HH:mm:ss')}}
                            </div>
                        </template>
                    </el-table-column>
                </el-table>

            </el-tab-pane>
            <el-tab-pane label="使用记录" name="second">
                <el-form :model="form2" ref="form2" label-width="100px" :inline="true" size="mini">
                    <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="form2.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="使用时间：" prop="usedTime">
                        <el-date-picker v-model="form2.usedTime" type="date" value-format="yyyy-MM-dd" placeholder="选择日期">
                        </el-date-picker>
                        <!-- <el-date-picker type="date" v-model="form2.usedTime" placeholder="选择日期时间">
                        </el-date-picker> -->
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                        <el-button type="primary" @click="clearForm('form2')">清空搜索条件</el-button>
                    </el-form-item>
                  <el-button v-if="rightsButtons['export']" style="float: right" type="success" size="mini" @click="download('used')">导出Execl</el-button>

                </el-form>
                <el-table :data="usedList" border stripe>
                    <el-table-column label="会员手机号" prop="mobile">
                    </el-table-column>
                    <el-table-column label="金额" prop="price">
                    </el-table-column>
                    <el-table-column label="使用时间" prop="usedAt">
                        <template slot-scope="scope">
                            <div>
                                {{formatDate(scope.row.usedAt,'YYYY-MM-DD HH:mm:ss')}}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="使用订单号" prop="orderId">
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        <el-pagination @current-change="currentChange" @size-change="changeSize" :current-page="activeName=='first' ? form.pageIndex : form2.pageIndex " :page-size="activeName=='first' ? form.pageSize : form2.pageSize" layout="sizes,total, prev, pager, next, jumper" :total="total" background>
        </el-pagination>

    </div>
</template>
<script>
import { getRecord, exportPacketReceived, exportPacketUsed } from '@/api/searchMsg'
export default {
    name: 'packetRecord',
    data() {
        return {
            activeName: 'first',
            receiveList: [],
            usedList: [],
            form: {
                mobile: '',
                receivedTime: '',
                pageIndex: 1,
                pageSize: 10,
            },
            form2: {
                mobile: '',
                usedTime: '',
                pageIndex: 1,
                pageSize: 10,
            },
            total: 0
        }
    },
    methods: {


      download(type){
        if(!this.form.receivedTime) {
          this.$message({
            type: 'error',
            message: '请选择要导出的日期'
          })
          return
        }
        let newElement = document.createElement('a')
        let nodeText = document.createTextNode('link')
        newElement.appendChild(nodeText)
        if(type === 'received') {
          newElement.setAttribute('href', process.env.PACKET_RAIN + '/hongbao/list/received/export?receivedTime='+ this.form.receivedTime)
        } else if (type === 'used') {
          newElement.setAttribute('href', process.env.PACKET_RAIN + '/hongbao/list/used/export?usedTime='+ this.form2.usedTime)
        }
        newElement.click()
      },

        handleClick(tab, event) {
            this.getReceive(tab.name)
        },
        async getReceive(from = 'first') {
            let method, request;
            if (from === 'first') {
                method = '/received';
                request = this.form;
            } else {
                method = '/used';
                request = this.form2;
            }
            const res = await getRecord(request, method, 'get');
            if (res.status === 200) {
                if (this.activeName == 'first') {
                    this.receiveList = res.data;
                } else {
                    this.usedList = res.data;
                }
                this.total = res.totalCount;
            }
        },
        clearForm(num) {
            this.$refs[num].resetFields();
        },
        onSubmit() {
            this.form.receivedTime = !this.form.receivedTime ? '' : this.form.receivedTime;
            this.form.pageIndex = 1
            this.form2.usedTime = !this.form2.usedTime ? '' : this.form2.usedTime;
            this.form2.pageIndex = 1
            this.getReceive(this.activeName);
        },
        currentChange(val) {
            if (this.activeName == 'first') {
                this.form.pageIndex = val;
            } else {
                this.form2.pageIndex = val;
            }
            this.getReceive(this.activeName)
        },
        changeSize(size) {
            if (this.activeName == 'first') {
                this.form.pageSize = size;
            } else {
                this.form2.pageSize = size;
            }
            this.getReceive(this.activeName)
        }

    },
    mounted() {
        this.getReceive();
    },
}
</script>
<style lang="scss" scoped>
.container {
  padding: 10px;
  background-color: white;
  .el-form .el-input,
  .el-form .el-textarea,
  .el-form .el-select,
  .el-form .el-date-editor {
    width: auto !important;
  }
}
</style>
